<template>
    <div class="component-table-head-btn">
        <div v-if="showSearch" class="search-box">
            <div class="input-box">
                <img class="icon" src="../assets/search.svg">
                <input ref="search-input">
                <img class="delete-btn" src="../assets/input-delete.png" @click="handleDeleteValue">
            </div>
            <div class="cancel-text" @click="handleCancel">取消</div>
        </div>
        <template v-else="">
            <div class="tab-btn" @click="handleShowSearch">
                <img src="../assets/icon-search.png">
                <span>搜索</span>
            </div>
            <div class="tab-btn">
                <img src="../assets/icon-filter.png">
                <span>筛选</span>
            </div>
        </template>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-table-head-btn {
        height: 3.3rem;
        text-align: center;
        background-color: @color-table-label;
        .tab-btn {
            width: 50%;
            float: left;
            img {
                height: 1rem;
                margin: 1.15rem .5rem;
                vertical-align: bottom;
            }
            span {
                font-size: 1.1rem;
                line-height: 3.3rem;
            }
        }
        .search-box {
            display: flex;
            align-items: center;
            padding-left: 1.2rem;
            .input-box {
                flex: 1;
                display: flex;
                align-items: center;
                background-color: @color-white;
                height: 2.4rem;
                border-radius: .3rem;
                padding-left: .8rem;
                padding-right: 1rem;
                .icon {
                    height: 1.3rem;
                }
                input {
                    flex: 1;
                    margin: 0 .5rem;
                    font-size: 1.3rem;
                }
                .delete-btn {
                    height: 1.3rem;
                }
            }
            .cancel-text {
                font-size: 1.4rem;
                line-height: 3.3rem;
                padding: 0 1rem;
                color: @color-text-blue;
            }
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                showSearch: false,
                value: ''
            }
        },
        methods: {
            handleShowSearch() {
                this.showSearch = true;

            },
            handleCancel(){
                this.showSearch = false;
                if(this.inputDom){
                    this.inputDom.value = '';
                }
            },
            handleDeleteValue(){
                if(this.inputDom){
                    this.inputDom.value = '';
                }
            }
        },
        updated(){
            this.inputDom = this.$refs['search-input'];
            if(this.inputDom){
                let timeout = null;
                const self = this;
                this.inputDom.oninput = () => {
                    if (timeout) {
                        clearTimeout(timeout);
                    }
                    timeout = setTimeout(() => {
                        self.$emit('oninput', this.inputDom.value);
                    }, 300);
                }
            }
        }

    }
</script>